<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>slider demo</title>
    <link href="../css/qs.css" rel="stylesheet" type="text/css" />
    <link href="../css/ui/dragdrop.css" rel="stylesheet" type="text/css" />
	<link href="../css/ui/slider.css" rel="stylesheet" type="text/css" />
    <link href="uidemo.css" rel="stylesheet" type="text/css" />

    <style>
		
    </style>
</head>
<body style="height:1000px">

    <br/><br/><br/><br/>

   
    <div id="slider1" style="width:200px">
    	
    </div>
 <br/><br/>
    <hr/>
    <br/>
    slider type:<select id=dragBarCount>
        <option value="1">single</option>
        <option value="2">multiple</option>
    </select>
    <br/><br/>
    slider length:<input id=len type="text" /><br/><br/>
    slider scales:<input id=scales  type="text" value='0,25,50,75,100'/><br/><br/>
    tip precision:<input id=precision  type="text" value='1'/><br/><br/>
    show tip:<select id=showTip >
        <option value="true">show tip</option>
        <option value="false">not show</option>
    </select>
    <br/><br/>
    show scale:<select id=showScale >
        <option value="true">show tip</option>
        <option value="false">not show</option>
    </select>
    <br/><br/>
    min scale:<input type="text" value=null id=minScale />
    <br/><br/>
    <input type=button onclick=change() value="OK"/>

    


<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../js/ui/dragdrop.js" type="text/javascript"></script>
    <script language="javascript" src="../js/ui/slider.js"></script>
<script language="javascript" type="text/javascript">
	//var cfg={scales:[0,25,50,75,100],precision:1,showTip:true,minScale:null,showScale:true,dragBarCount:2};
    var s = new slider($("#slider1"));    
	
	function change(){
		$("#slider1").css({width:parseInt($("#len").val())});
		var dragBarCount = $("#dragBarCount").val();
		var precision = $("#precision").val();
		var showTip = $("#showTip").val();
		var minScale = $("#minScale").val();
		var showScale = $("#showScale").val();
		var scales = $("#scales").val().split(",");
		$("#slider1").html("");
        cfg={scales:scales,precision:precision,showTip:eval(showTip),minScale:minScale,showScale:eval(showScale),dragBarCount:dragBarCount};
        s = new slider($("#slider1"),cfg);
	}
</script>
</body>
</html>
